<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="后台书籍管理">
<meta name="author" content="xwj">
<title>书籍管理</title>
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="css/admin_css/assets/font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/lineicons/style.css">

<!--  Custom styles for this template -->
<link href="css/admin_css/assets/css/style.css" rel="stylesheet">
<link href="css/admin_css/assets/css/style-responsive.css"
	rel="stylesheet">
	<style>
	
	#imgPreview { float: left; border: none; }
 #imgPreview img { margin-right: 10px; width: 100px; } 
 .upload-img { display: block; float: left; width: 80px; height: 80px; overflow: hidden; position: relative; background: url("images/public/defaul.png") no-repeat 0; background-size: contain; }  
.upload-img input { height: 50px; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; right: 0; }
	
	
	</style>
<script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
	<!-- js placed at the end of the document so the pages load faster -->
 <script class="include" type="text/javascript"
		src="css/admin_css/assets/js/jquery.dcjqaccordion.2.7.js"></script> 
	<script src="css/admin_css/assets/js/jquery.scrollTo.min.js"></script>
	<script src="css/admin_css/assets/js/common-scripts.js"></script> 
	<!-- 分页工具 -->
<script type="text/javascript" src="jsutil/pagetool.js"></script>
<!-- 时间处理工具 -->
<script type="text/javascript" src="jsutil/timeutil.js"></script>
<!-- 表单验证 -->
<script
	src="bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script>
var pageNum = 1;
$(function(){
	 $("#booksmsg").addClass("active");
	$("#libook").addClass("active"); 
	getCategory();
	getBooks(pageNum);
	loadimg();
	
	//类别添加表单验证
	$("#add_form").bootstrapValidator({
		message : 'This value is not valid',
		feedbackIcons : {/*输入框不同状态，显示图片的样式*/
			valid : 'glyphicon glyphicon-ok',
			invalid : 'glyphicon glyphicon-remove',
			validating : 'glyphicon glyphicon-refresh'
		},
		fields : {/*验证*/
			bnum : {/*键名username和input name值对应*/
				message : 'The cname is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '编号不能为空'
					},
					stringLength : {/*长度提示*/
						min :6 ,
						max : 10,
						message : '编号的长度必须在6到10之间'
					},/*最后一个没有逗号*/
					remote : { //查询是否有相同的用户名
						url : "booksMsg/bnumYZ.do",
						type : "post",
						data : {
							"bnum" : $("input[name='bnum']").val()
						},
						delay : 2000, //ls后执行ajax
						dataType : "json",
						message : "该编号已存在"//提示信息
					}

				}
			},
			bname : {
				message : 'The cdesc is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '书名不能为空'
					},
					stringLength : {/*长度提示*/
						max : 16,
						message : '书名的长度必须小于16位'
					}
				}
			},
			bauthor:{
				message : 'The bauthor is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '作者名不能为空'
					},
					stringLength : {/*长度提示*/
						max : 16,
						message : '作者的长度必须小于16位'
					}
				}
			},
			cid:{
				message : 'The cid is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '类别不能为空'
					},
					regexp: {
	                 	regexp: /^[1-9]/,
	                 	message: '类别不能为空' 
	                 }
				}
			},
			file1:{
				message : 'The file is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '图片不能为空'
					}
				}
			},
			bpress:{
				message : 'The bpress is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '出版社不能为空'
					},
					stringLength : {/*长度提示*/
						max : 16,
						message : '出版社的长度必须小于16位'
					}
				}
			},
			borgprice:{
				message : 'The borgprice is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '原价不能为空'
					},
					 regexp: {
		                 	regexp: /^([1-9][0-9]*)+(.[0-9]{1,2})?$/,
		                 	message: '必须是整数或者两位小数' 
		                 },
					stringLength : {/*长度提示*/
						max : 16,
						message : '原价的长度必须小于16位'
					}
				}
			},
			bprice:{
				message : 'The borgprice is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '现价不能为空'
					},
					 regexp: {
		                 	regexp: /^([1-9][0-9]*)+(.[0-9]{1,2})?$/,
		                 	message: '必须是整数或者两位小数' 
		                 },
					stringLength : {/*长度提示*/
						max : 16,
						message : '现价的长度必须小于16位'
					}
				}
			},
			bnumber:{
				message : 'The bnumber is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '数量不能为空'
					},
					 regexp: {
		                 	regexp: /^[1-9]\d*$/,
		                 	message: '必须是数字' 
		                 },
					stringLength : {/*长度提示*/
						max : 6,
						message : '数量的长度必须小于6位'
					}
				}
			},
			bdesc : {
				message : 'The cdesc is not valid',
				validators : {
					notEmpty : {/*非空提示*/
						message : '描述不能为空'
					},
					stringLength : {/*长度提示*/
						min :4,
						max : 100,
						message : '描述的长度必须4到100之间'
					}
				}
			}
		}
	});
});


//分页查询
function getBooks(pageNum) {
var selbkey=$("#sel_bkey").val();
var selbpress=$("#sel_bpress").val();
var selbprice=$("#sel_bprice").val();
var selcid=$("#sel_cid").val();
var selbflag=$("#sel_bflag").val();
	$.ajax({
				url : "booksMsg/getBooksList.do", // 请求地址
				type : "POST", // 请求类型
				async : "true", // 是否异步方式
				data : {
					"num" : pageNum,
					"bkey":selbkey,
					"bpress":selbpress,
					"beginPrice":selbprice,
					"cid":selcid,
					"bflag":selbflag
				},
				dataType : "json", // 返回数据格式
				success : function(data) {
					var tbodys = $("tbody").empty();
					if (data.res == 1) {
				
						$.each(data.list,function(index, element) {
							var bookflag="已下架";
							if(element.bflag==1){
								bookflag="销售中";
							}
							//时间处理
							
							var pdate=Todate(element.bpressdate); 
							var d1 = new Date(element.btime);  
							var btime=formatDateTime(d1); 
							
					var tr = "<tr><td>"
						+ (index + 1)
						+ "<input type='hidden' value='"+element.bid+"'></td>"
						+ "<td><br><img src='"+element.bpicurl+"' class='img-responsive' onclick='getDT(this)' width='60' /></td>"
						+ "<td>"
						+ "<h5>编号："+element.bnum+"</h5>"
						+ "<h5>书名："+element.bname+"</h5>"
						+ "<h5>作者："+element.bauthor+"</h5>"
						+ "</td>"
						+"<td>"
						+ "<h5>出版社："+element.bpress+"</h5>"
						+ "<h5>出版时间："+pdate+"</h5>"
						+ "<h5>上架时间："+btime+"</h5>"
						+"</td>"
						+"<td>"
						+ "<h5>原价："+element.borgprice+"</h5>"
						+ "<h5>现价："+element.bprice+"</h5>"
						+"</td>"
						+"<td>"
						+ "<h5>库存："+element.bnumber+"</h5>"
						+ "<h5>销量："+element.bsalenum+"</h5>"
						+"</td>"
						+"<td><br>"
						+ "<h5>"+element.category.cname+"</h5>"
						+"</td>"
						+"<td><br>"
						+ "<h5>"+bookflag+"</h5>"
						+"</td>"
						+"<td id='b"+element.bid+"'>"
						+"</td></tr>"
						;
						tbodys.append(tr);
						 var p=$("#b"+element.bid);
	 					  if(element.bflag==1){
	 						p.prepend("<br>"
	 								+"<button class='btn btn-warning' onclick=changeBookState("+element.bflag+","+element.bid+")>下架</button>&nbsp"
	 								+"<button class='btn btn-primary' onclick='detail("+element.bid+")'>查看</button>");
	 					}else {
	 						p.prepend("<br>"
	 								+"<button class='btn btn-success' onclick=changeBookState("+element.bflag+","+element.bid+")>上架</button>&nbsp"
	 								+"<button class='btn btn-primary' onclick='detail("+element.bid+")'>查看</button>");
	 					}
										});
						setPage(pageNum, data.totalPage, "getBooks");
					}

				}
			});

}
//查询表单重置
function resetSelForm(){
	$("#selForm")[0].reset();
	getBooks(1);
}

//添加书籍信息
function add() {
	var bv = $("#add_form").data('bootstrapValidator');
	bv.validate();
	if (!bv.isValid()) {
		return;
	}
	if (!confirm("确认要添加吗?")) {
		return;
	}
	 var form = new FormData(document.getElementById("add_form"));
	$.ajax({
		url : "booksMsg/add.do",
		type : 'POST',
		async : "true",
		data : form,
		 processData:false,
         contentType:false,
		dataType : 'json',
		success : function(data) {
			if (data.res == 1) {
				alert("添加成功");
				//关闭模态框
				$('#addModal').modal('hide');
				$('#add_form')[0].reset();
				getBooks(1);
			} else {
				alert("添加失败！");
				
			}
		}
	});
}
//改变书籍状态
function changeBookState(state,bid) {
	var bflag=1;
	if(state==1){
		bflag=0;
		if (!confirm("确认要下架吗?")) {
			return;
		}
	}else{
		bflag=1;
		if (!confirm("确认要上架吗?")) {
			return;
		}
	}
	$.ajax({
		url : "booksMsg/changeBookState.do",
		type : 'POST',
		async : "true",
		data : {
			"bid":bid,
			"bflag":bflag
		},
		dataType : 'json',
		success : function(data) {
			if (data.res == 1) {
				alert("操作成功");
				getBooks(1);
			} else {
				alert("操作失败！");
				
			}
		}
	});
}
//打开添加模态框
function dakai() {
	$('#addModal').modal('show');
}
function getCategory(){
	$.post("categoryMsg/getAllCategory.do",{},
			function(data){
				var theme=$("select[name='cid']");
				var selectCid=$("#sel_cid");
				theme.append("<option value='-1' selected>请选择</option>");
				selectCid.append("<option value='-1' selected>--类别查询--</option>");
				$.each(data.list,function(index,element){
					theme.append("<option value='"+element.cid+"'>"+element.cname+"</option>");
					selectCid.append("<option value='"+element.cid+"'>"+element.cname+"</option>");
				});
				
			},"json"); 
	
	}
//添加时显示选的图片
function loadimg(){

	$("#fileUpload").change(function () { if (typeof (FileReader) != "undefined") 
		{ var dvPreview = $("#imgPreview"); 
		dvPreview.html(""); 
		var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
		 $($(this)[0].files).each(function () 
		 	{ var file = $(this); if (regex.test(file[0].name.toLowerCase())) 
		 		{ 
				var reader = new FileReader(); 
				reader.onload = function (e) 
				{ var img = $("<img />");
				 img.attr("src", e.target.result); 
				 dvPreview.append(img); } 
				 reader.readAsDataURL(file[0]); } 
				 else { alert(file[0].name + " 不是图片类型文件."); 
				 dvPreview.html(""); return false; }
				  }); } 
		 else { alert("This browser does not support HTML5 FileReader."); } }); 
	}
	//大图
function getDT(obj){
	var _this = $(obj);//将当前的pimg元素作为_this传入函数  
    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
}
function imgShow(outerdiv, innerdiv, bigimg, _this){  
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
  
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
    $("<img/>").attr("src", src).load(function(){  
        var windowW = $(window).width();//获取当前窗口宽度  
        var windowH = $(window).height();//获取当前窗口高度  
        var realWidth = this.width;//获取图片真实宽度  
        var realHeight = this.height;//获取图片真实高度  
        var imgWidth, imgHeight;  
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
          
        if(realHeight>windowH*scale) {//判断图片高度  
            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                imgWidth = windowW*scale;//再对宽度进行缩放  
            }  
        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
        } else {//如果图片真实高度和宽度都符合要求，高宽不变  
            imgWidth = realWidth;  
            imgHeight = realHeight;  
        }  
                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
          
        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });  
      
    $(outerdiv).click(function(){//再次点击淡出消失弹出层  
        $(this).fadeOut("fast");  
    });  
}  
</script>
	
</head>
<body>


	<section id="container">

		<%@include file="header.jsp" %>

		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">

					<p class="centered">
						<a href="admin/adminmag.jsp"><img
							src="images/admin7.png" class="img-circle"
							width="60"></a>
					</p>
					<h5 class="centered">${admin.aname}</h5>

					<li class="mt"><a href="admin/index.jsp"> <i
							class="fa fa-bar-chart-o"></i> <span>销售统计</span>
					</a></li>

					<li class="sub-menu"><a class="active" href="javascript:;">
							<i class="fa fa-book"></i> <span>书籍</span>
					</a>
						<ul class="sub">
							<li class="active"><a href="admin/bookmag.jsp">书籍管理</a></li>
							<li ><a href="admin/categorymag.jsp">类别管理</a></li>

						</ul></li>

					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-users"></i> <span>账户</span>
					</a>
						<ul class="sub">
							<li><a href="admin/usermag.jsp">用户管理</a></li>
							<li><a href="admin/adminmag.jsp">管理员管理</a></li>

						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-user"></i> <span>会员</span>
					</a>
						<ul class="sub">
							<li><a href="admin/membermag.jsp">会员折扣管理</a></li>

						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-shopping-cart"></i> <span>订单</span>
					</a>
						<ul class="sub">
							<li><a href="admin/ordermag.jsp">订单管理</a></li>
						</ul></li>

				</ul>
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!-- **********************************************************************************************************************************************************
     以上是不变的内容--包括上边header和左边aside33###以下是变化的内容
      *********************************************************************************************************************************************************** -->

		<!--main content start-->
		<section id="main-content">

			<section class="wrapper">
				<h3>
					<i class="fa fa-angle-right"></i> 书籍信息管理
				</h3>
				<div class="row mt">
					<div class="col-lg-12">
						<div class="form-panel">
							<h5 class="mb">
								<i class="fa fa-angle-right"></i>操作
							</h5>
							<form class="form-inline" role="form" id="selForm">
								<div class="form-group">
									<input type="text" class="form-control" id="sel_bkey"
										placeholder="输入书的基本信息关键字">
								</div>
								<div class="form-group">
									<input type="text" class="form-control" id="sel_bpress"
										placeholder="输入出版社名称">
								</div>
								<div class="form-group">
									<input type="number" class="form-control" id="sel_bprice"
										placeholder="价格大于输入值">
								</div>
								<div class="form-group">
									<select class="form-control" id="sel_cid">
										
									</select>
								</div>
								<div class="form-group">
									<select class="form-control" id="sel_bflag">
										<option value="-1">--是否上架--</option>
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</div>
								<button type="button" class="btn btn-primary" onclick="getBooks(1)" >查询</button>
								<button type="button" class="btn btn-warning" onclick="resetSelForm()">重置</button>
								
							<button type="button" class="btn btn-success" onclick="dakai()">添加</button>
							</form>
						</div>
						<!-- /form-panel -->
					</div>
					<!-- /col-lg-12 -->
				</div>
				<!-- /row -->


				<div class="row mt">
					<div class="col-md-12">
						<div class="content-panel">
							<table class="table table-striped table-advance table-hover">
								<!--   	  <h4><i class="fa fa-angle-right"></i> 书籍信息</h4>  -->

								<thead>
									<tr>
										<th>#</th>
										<th><i class="fa fa-bullhorn"></i> 封面</th>
										<th><i class="fa fa-bullhorn"></i> 基本信息</th>
										<th class="hidden-phone"><i class="fa fa-bullhorn"></i> 出版&时间信息</th>
										<th class="hidden-phone"><i class="fa fa-bullhorn"></i> 价格</th>
										<th class="hidden-phone"><i class="fa fa-bullhorn"></i> 数量</th>
										<th ><i class="fa fa-bullhorn"></i> 类别</th>
										<th ><i class="fa fa-bullhorn"></i> 状态</th>
										<th><i class="fa fa-bullhorn"></i>操作</th>
									</tr>
								</thead>
								<tbody>
								
								</tbody>
							</table>
						</div>
						<!-- /content-panel -->
					</div>
					<!-- /col-md-12 -->

				</div>
			
					<div class="" id="mypage">
								<jsp:include flush="fasle" page="/jsutil/pagetool.jsp" />
							</div>
			</section>

		</section>
		<!-- /MAIN CONTENT -->

		<!--main content end-->
		<!--footer start-->
		<%@include file="footer.jsp"%>
		<!--footer end-->

	</section>
	<!-- 图片弹出层 -->
	<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
	</div>    
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="addModal" 
		tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新书入库</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form"  id="add_form"  enctype="multipart/form-data"  method="post">
						<div class="form-group">
							<label for="add_bnum" class="col-sm-2 control-label">编号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="add_bnum" name="bnum"
									placeholder="请输入书的编号">
							</div>
						</div>
							<div class="form-group">
							<label for="add_bname" class="col-sm-2 control-label">书名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="add_bname" name="bname"
									placeholder="请输入书的名字">
							</div>
						</div>
						<div class="form-group">
							<label for="add_bauthor" class="col-sm-2 control-label">作者</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="add_bauthor" name="bauthor"
									placeholder="请输入书的作者">
							</div>
						</div>
							<div class="form-group">
							<label for="theid" class="col-sm-2 control-label">类别</label>
							<div class="col-sm-4">
							<select id="theid"  class="form-control" name="cid">
							</select>
							</div>
							</div>
							<div class="form-group">
							<label for="add_bpicurl" class="col-sm-2 control-label">图片</label>
							<div class="col-sm-8">
							<div id="imgPreview"></div>
							 <span class="upload-img">
							 <input id="fileUpload"  class="form-control"  type="file" multiple="multiple" name="file1" placeholder="上传图片">
							 </span>
							</div>
							</div>
							<div class="form-group">
							<label for="add_bauthor" class="col-sm-2 control-label">出版社</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="" name="bpress"
									placeholder="请输入书的出版社">
							</div>
						</div>
							<div class="form-group">
							<label for="bpressdate1" class="col-sm-2 control-label">出版时间</label>
							<div class="col-sm-10">
								<input type="date" class="form-control" id="bpressdate1" name="bpressdate"
									placeholder="请输入书的出版时间">
							</div>
						</div>
						<div class="form-group">
							<label for="borgprice1" class="col-sm-2 control-label">原价</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="borgprice1" name="borgprice"
									placeholder="请输入书的原价">
							</div>
						</div>
						<div class="form-group">
							<label for="add_bauthor" class="col-sm-2 control-label">现价</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="" name="bprice"
									placeholder="请输入书的现价">
							</div>
						</div>
							<div class="form-group">
							<label for="" class="col-sm-2 control-label">数量</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="" name="bnumber"
									placeholder="请输入书的数量">
							</div>
						</div>
							<div class="form-group">
							<label for="add_bauthor" class="col-sm-2 control-label">书的描述</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" id="bdesc"
									name="bdesc" placeholder="请输入书的描述"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" id="add_btn" onclick="add()">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>


</body>
</html>